<template>
  <view>
    <view class="Stranger" v-if="strangerList.length">Stranger</view>
    <view v-if="strangerList.length" class="list">
      <view class="name-view" v-for="item,index in  strangerList" :key="index" @click="handleToPage(`/pages/chat/PersonalChat?targetId=${item.userId}&commentName=${formatUserName(item)}&id=${item.id}`)">
        <image :src="item.avatarCompress || item.avatar" class="friends-icon" mode="aspectFill" v-if="isPeopleAvatarExit(item.avatarCompress || item.avatar)" />
        <view
          v-else
          class="friends-icon avator-font-setting"
          :style="{ background: `${getDefaultColor(item.avatarColorCode)}`, fontSize: '30upx' }"
          >{{ formatUserName(item).slice(0, 1) }}</view
        >
        <view class="userName">{{ formatUserName(item) }}</view>
      </view>
    </view>
    <view class="Stranger" v-if="contactsList.length">Contacts</view>
    <view v-if="contactsList.length" class="list">
      <view class="name-view" v-for="item,index in  contactsList" :key="index" @click="handleToPage(`/pages/chat/PersonalChat?targetId=${item.userId}&commentName=${formatUserName(item)}&id=${item.id}`)">
        <image :src="item.avatarCompress || item.avatar" class="friends-icon" mode="aspectFill" v-if="isPeopleAvatarExit(item.avatarCompress || item.avatar)" />
        <view
          v-else
          class="friends-icon avator-font-setting"
          :style="{ background: `${getDefaultColor(item.avatarColorCode)}`, fontSize: '30upx' }"
          >{{ formatUserName(item).slice(0, 1) }}</view
        >
        <view class="userName">{{ formatUserName(item) }}</view>
      </view>
    </view>

  </view>
</template>

<script>
import { getDefaultColor } from "@/utils/index";
export default {
  props:['contactsList','strangerList'],
  data(){
    return{
    
    }
  },
  methods:{
    getDefaultColor,
    handleToPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.Stranger{
  margin:40upx 0upx 20upx 30upx;
  font-size: 24upx;
  font-weight: 400;
  color: #878787;
}
.list{
  padding: 0 30upx;
  background: #fff;
  padding-bottom: 0upx;
}
.name-view {
  padding: 20upx 0;
  display: flex;
  align-items: center;
  border-bottom: 2upx solid #F6F6F6;
}
.friends-icon {
  width: 80upx;
  height: 80upx;
  background: linear-gradient(0deg, #fd644f 0%, #f28e26 100%);
  border-radius: 50%;
}
.userName {
  font-size: 30upx;
  font-weight: 400;
  color: #000000;
  margin-left: 33upx;
}
</style>